<template>
  <view class="content">
    <view class="flex-1 flexc align-center justify-center">
      <image class="code" :src="miniProgramCode" :show-menu-by-longpress="true"></image>
      <view class="text-color2">
        截图进行保存图片或点击<br />
        下方按钮分享给好友
      </view>
    </view>
    <button class="primary-button" open-type="share">赠送优惠券</button>
  </view>
</template>

<script setup>
import { GssGetQrCodev3, GetCouponDetail } from "@/api/api";
import {
  buildShareSceneMap,
  buildShareQueryParams,
  SHARE_ACTION_GIVE_COUPON,
} from "@/tools/share";
import { ref } from "vue";
const couponDetail = ref({});
// function showShareMenu() {
// 	console.log('showShareMenu')
// 	wx.showShareMenu({
// 	  withShareTicket: true,
// 	  menus: ['shareAppMessage', 'shareTimeline']
// 	})
// }
import { onShareAppMessage, onLoad } from "@dcloudio/uni-app";
const miniProgramCode = ref("");

onLoad((options) => {
	uni.showLoading({
		title: "加载中",
	});
  GetCouponDetail(options.couponNumber).then((data) => {
    couponDetail.value = data;

    // const pages = getCurrentPages();
    // const pagePath = pages[pages.length - 1].route;
    const pagePath = "pages/appointment/appointment";
    GssGetQrCodev3(
      pagePath,
      JSON.stringify(
        buildShareSceneMap(SHARE_ACTION_GIVE_COUPON, { ...couponDetail.value })
      )
    ).then((data) => {
      miniProgramCode.value = `data:image/jpeg;base64,${data}`;
    }).finally(() => {
			uni.hideLoading();
		});
  });
});
onShareAppMessage((options) => {
  // console.log("onShareAppMessage", options);
  // const pages = getCurrentPages();
  // const pagePath = pages[pages.length - 1].route;
  const title = `赠送你一张在[${couponDetail.value.storesName}]购买[${couponDetail.value.commodityBrandName}]产品的优惠券`;
  const query = buildShareQueryParams(SHARE_ACTION_GIVE_COUPON, {
    ...couponDetail.value,
  });
  if (options.from == "button") {
    return {
      title,
      path: `pages/appointment/appointment?${query}`,
    };
  } else {
    return {
      title,
      path: `pages/appointment/appointment?${query}`,
    };
  }
});
</script>

<style lang="scss">
.content {
  background-color: white;
  padding: 48rpx;
  border-top: 1px solid $divider-color;
  .code {
    width: 512rpx;
    height: 512rpx;
    margin-bottom: 48rpx;
  }
  .text-color2 {
    // width: 300rpx;
    text-align: center;
    line-height: 50rpx;
  }
  .primary-button {
    align-self: stretch;
    margin-bottom: 25rpx;
    width: 100%;
  }
}
</style>
